<template>
	<view>
		<view class="relative text-white details-box" style="background-color: #0DA25F;">
			<u-status-bar></u-status-bar>
			<view class="Grid Grid--center text-xs" style="margin-bottom: 40rpx; padding: 38rpx 40rpx 0;">
				<view class="Grid Grid--center" style="width: 80%;">
					<u-icon name="arrow-left" color="#ffffff" style="padding: 10rpx;" @click="rightClick"></u-icon>
					<view class="truncate" style="max-width: 70%; padding: 0 10rpx;">{{item.competition && item.competition.name}}</view>
					<view>{{item.match_time}}</view>
				</view>
				<view class="Grid-cell text-right" style="padding: 10rpx;">
					<div id="star" @click="handleCollect" :class="{'fill': item.flag ? true : false}"></div>
				</view>
			</view>
			<view style="padding: 0 50rpx 38rpx;">
				<view class="Grid Grid--center Grid--justifyCenter Grid--1of3 text-center">
					<view class="Grid-cell" style="width: 30%;" v-if="item.home_team">
						<u-image :src="item.home_team.logo" width="52rpx" height="52rpx" mode="aspectFill"
							style="margin: 0 auto 22rpx; display: inline-block;"></u-image>
						<view class="Media-body truncate text-sm truncate">{{item.home_team.team_name}}</view>
					</view>
					<view class="Grid-cell" v-if="item.match_info">
						<view class="text-xs">{{COMPETITION_STATUS[item.match_info.status_id]}}</view>
						<view style="font-size: 25px; font-weight: bold;">{{item.match_info.home_bifen}}-{{item.match_info.away_bifen}}</view>
					</view>
					<view class="Grid-cell" style="width: 30%;" v-if="item.away_team">
						<u-image :src="item.away_team.logo" width="52rpx" height="52rpx" mode="aspectFill"
							style="margin: 0 auto 22rpx; display: inline-block;"></u-image>
						<view class="Media-body truncate text-sm truncate">{{item.away_team.team_name}}</view>
					</view>
				</view>
				<view v-if="item.analysis" class="Grid Grid--center Grid--justifyCenter Grid--1of2 text-xs" style="padding: 20rpx 0 0;">
					<view class="Grid-cell" style="padding: 0 12rpx 0 0;">
						<view class="Grid Grid--justifySpaceBetween"
							style="background: #EC602E; border-radius: 30rpx; padding: 8rpx 20rpx;">
							<view>胜平负分析</view>
							<view>{{item.analysis.spf && item.analysis.spf.ai_spf || '/'}}</view>
						</view>
					</view>
					<view class="Grid-cell" style="padding: 0 0 0 12rpx;">
						<view class="Grid Grid--justifySpaceBetween"
							style="background: #FFA703; border-radius: 30rpx; padding: 8rpx 20rpx;">
							<view>最大可能进球区间</view>
							<view>{{item.analysis.ainsmx && item.analysis.ainsmx.min}}-{{item.analysis.ainsmx && item.analysis.ainsmx.max}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view style="width: 100%; height: 40px; background-color: #0DA25F;">
				<z-tabs class="zTabs" unit="rpx" ref="tabs" :scroll-count="5" bar-width="66rpx"
					bar-height="14rpx" :list="tabList" :current="current" @change="tabsChange"
					:active-style="{color: '#000000'}" :inactive-style="{color: '#6F837A', 'fontWeight': 'normal'}"
					active-color="linear-gradient( 90deg, #05B767 0%, rgba(255,204,1,0.2) 100%)"
					bottom-space="0" :tab-width="0" />
			</view>
			<view>
				<competitionModel v-show="current == 0" :info="item" />
				<competitionInfo v-show="current == 1" :info="item" />
			</view>
			<!-- <z-paging-swiper :fixed="false" :swiper-style="swiperStyle">
				<template #top>
					<view style="width: 100%; height: 40px; background-color: #0DA25F;">
						<z-tabs class="zTabs" unit="rpx" ref="tabs" :scroll-count="5" bar-width="66rpx"
							bar-height="14rpx" :list="tabList" :current="current" @change="tabsChange"
							:active-style="{color: '#000000'}" :inactive-style="{color: '#666666'}"
							active-color="linear-gradient( 90deg, #05B767 0%, rgba(255,204,1,0.2) 100%)"
							bottom-space="0" :tab-width="0" />
					</view>
				</template>
				<swiper class="swiper" :current="current" @transition="swiperTransition"
					@animationfinish="swiperAnimationfinish">
					<swiper-item class="swiper-item" v-for="(_item, _index) in tabList" :key="_index">
						<list-item ref="listItem" :componentCurrent="_item.componentCurrent" :tabIndex="_index"
							:clickIndex="clickIndex" :currentIndex="current" @initData="loadData" :info="item"></list-item>
					</swiper-item>
				</swiper>
			</z-paging-swiper> -->
		</view>
		<view v-if="![0, 1].includes(item.match_info && item.match_info.status_id)" :class="['relative refresh-btn text-xs text-white text-center', {active: isAnimation}]" @click.stop="handleRefresh">
			<text>刷新</text>
		</view>
	</view>
</template>

<script>
	import ListItem from '@/components/list-item/list-item.vue';
	import competitionModel from '../../pages/details/cps/model.vue';
	import competitionInfo from '../../pages/details/cps/info.vue';
	import {
		matchInfo,
		matchFocus
	} from '@/service/index.js'

	export default {
		data() {
			return {
				item: {},
				options: {},
				clickIndex: 0,
				tabList: [{
					name: '多元模型',
					value: 0,
					componentCurrent: 'competitionModel'
				}, {
					name: '关键数据',
					value: 1,
					componentCurrent: 'competitionInfo'
				}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				isCollect: false,
				COMPETITION_STATUS: {
					0: '异常',
					1: '未开赛',
					2: '上半场',
					3: '中场',
					4: '下半场',
					5: '加时赛',
					6: '加时赛',
					7: '点球决战',
					8: '完场',
					9: '推迟',
					10: '中断',
					11: '腰斩',
					12: '取消',
					13:'待定',
				},
				isAnimation: false
			}
		},
		components: {
			ListItem,
			competitionModel,
			competitionInfo
		},
		computed: {
			swiperStyle() {
				return {
					height: '100vh'
				}
			}
		},
		async onLoad(options) {
			this.options = options
			this.getMatchInfo()
			setTimeout(() => {
				var zTab = document.getElementById(`z-tabs-item-${this.current}`);
				zTab.style.backgroundColor = "#FFFFFF";
			}, 50)
		},
		methods: {
			async getMatchInfo() {
				if (this.options.match_id) {
					try {
						const {
							data
						} = await matchInfo({
							match_id: this.options.match_id
						})
						console.log(data)
						this.item = data
					} catch (e) {
						// TODO handle the exception
					}
				}
			},
			initData() {
				if (this.token) this.isView = true
			},
			// 数据加载
			loadData(params) {
				this.$refs.listItem[this.current].getData([{}])
			},
			// tabs通知swiper切换
			tabsChange(index, value) {
				this.current = index;
				var zTab = document.getElementById(`z-tabs-item-${index}`);
				zTab.style.backgroundColor = "#FFFFFF";
				var zTab_o = document.getElementById(`z-tabs-item-${index ? 0 : 1}`);
				zTab_o.style.backgroundColor = "#EEFFF7";
			},
			// swiper滑动中
			swiperTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			// swiper滑动结束
			swiperAnimationfinish(e) {
				this.current = e.detail.current;
				this.$refs.tabs.unlockDx();
			},
			// 如果要通知当前展示的z-paging刷新，请调用此方法
			reloadCurrentList() {
				this.$refs.listItem[this.current].reload();
			},
			refreshData() {
				this.$refs.listItem[this.current].refresh()
			},
			rightClick() {
				uni.navigateBack(-1)
			},
			async handleCollect() {
				// this.isCollect = !this.isCollect
				try {
					const {
						data
					} = await matchFocus({
						match_id: this.item.match_id,
						flag: !this.item.flag ? 1 : 0
					})
					console.log(data)
					// this.isCollect = !item.flag ? true : false
					this.getMatchInfo()
				} catch (e) {
					// TODO handle the exception
				}
			},
			handleRefresh() {
				this.isAnimation = false
				setTimeout(() => {
					this.isAnimation = true
					this.getMatchInfo()
				}, 50)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/assets/star/index.css";
	
	.zTabs {
		background: #EEFFF7 !important;
		border-radius: 30rpx 30rpx 0 0 !important;
	}
	::v-deep .z-tabs-bottom {
		z-index: 10 !important;
		bottom: 8px !important;
	}

	.swiper {
		height: 100%;
	}
	
	.refresh-btn {
		position: fixed;
		right: 50rpx;
		bottom: 20%;
		width: 98rpx;
		height: 98rpx;
		line-height: 98rpx;
		border-radius: 50%;
		background: url("https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/refresh.png") no-repeat;
		background-position: center;
		background-size: 100%;
		box-shadow: 0 12px 10px -10px rgba(0, 0, 0, .1);
	}
	.refresh-btn.active {
		animation: rotateAndRebound 1s ease-in-out;
	}
	@keyframes rotateAndRebound {
	  0% {
	    transform: rotate(0deg);
	  }
	  100% {
	    transform: rotate(1080deg);
	  }
	}
	#star {
		width: 40rpx;
		height: 40rpx;
		background-image: url("https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/29.png");
	}
</style>